{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "blur-vignette-video",
  "type": "registry:component",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/blurvignette/blurvignettevideo.tsx",
      "content": "import { cn } from '@/lib/utils';\r\nimport Image from 'next/image';\r\nimport React from 'react';\r\nimport {\r\n  BlurVignette,\r\n  BlurVignetteArticle,\r\n} from '@/components/ui/blur-vignette';\r\n\r\nfunction index() {\r\n  return (\r\n    <>\r\n      <BlurVignette\r\n        radius='24px'\r\n        inset='10px'\r\n        transitionLength='100px'\r\n        blur='15px'\r\n        classname='h-96 w-full overflow-hidden'\r\n      >\r\n        <video\r\n          autoPlay={true}\r\n          muted\r\n          loop\r\n          content='true'\r\n          className='w-full  h-full object-cover  transition-all hover:scale-110'\r\n        >\r\n          <source\r\n            src='https://cdn.pixabay.com/video/2023/10/19/185726-876210695_large.mp4'\r\n            type='video/mp4'\r\n          />\r\n        </video>\r\n        <BlurVignetteArticle />\r\n      </BlurVignette>\r\n    </>\r\n  );\r\n}\r\n\r\nexport default index;\r\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/blur-vignette.tsx",
      "content": "'use client';\r\nimport React, { createContext, useContext } from 'react';\r\nimport { cn } from '@/lib/utils';\r\ninterface BlurVignetteContextProps {\r\n  radius?: string;\r\n  inset?: string;\r\n  transitionLength?: string;\r\n  blur?: string;\r\n}\r\n\r\nconst BlurVignetteContext = createContext<BlurVignetteContextProps>({\r\n  radius: '24px',\r\n  inset: '20px',\r\n  transitionLength: '44px',\r\n  blur: '6px',\r\n});\r\n\r\nexport const useBlurVignetteContext = () => useContext(BlurVignetteContext);\r\n\r\ninterface BlurVignetteProps {\r\n  classname?: string;\r\n  children: React.ReactNode;\r\n  radius?: string;\r\n  inset?: string;\r\n  transitionLength?: string;\r\n  blur?: string;\r\n  blurclassname?: string;\r\n}\r\n\r\nexport const BlurVignette: React.FC<BlurVignetteProps> = ({\r\n  classname,\r\n  children,\r\n  radius = '24px',\r\n  inset = '20px',\r\n  transitionLength = '44px',\r\n  blur = '6px',\r\n}) => {\r\n  return (\r\n    <BlurVignetteContext.Provider\r\n      value={{ radius, inset, transitionLength, blur }}\r\n    >\r\n      <div\r\n        className={cn('relative aspect-square overflow-hidden', classname)}\r\n        style={{ borderRadius: radius }}\r\n      >\r\n        {children}\r\n      </div>\r\n    </BlurVignetteContext.Provider>\r\n  );\r\n};\r\ninterface BlurVignetteArticleProps {\r\n  children?: React.ReactNode;\r\n  classname?: string;\r\n}\r\n\r\nexport const BlurVignetteArticle: React.FC<BlurVignetteArticleProps> = ({\r\n  children,\r\n  classname,\r\n}) => {\r\n  const { radius, inset, transitionLength, blur } = useBlurVignetteContext();\r\n\r\n  return (\r\n    <div\r\n      className={cn(\r\n        'blur-vignette bottom-0 left-0 w-full h-full z-1',\r\n        classname\r\n      )}\r\n      style={\r\n        {\r\n          '--radius': radius,\r\n          '--inset': inset,\r\n          '--transition-length': transitionLength,\r\n          '--blur': blur,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n",
      "type": "registry:component"
    }
  ]
}